const [movies, setMovies] = useState([
{
id: "1",
title: "Oceans 8",
category: "Comedy",
likes: 4,
dislikes: 1
},
{
id: "2",
title: "Midnight Sun",
category: "Comedy",
likes: 2,
dislikes: 0
},
{
id: "3",
title: "Les indestructibles 2",
category: "Animation",
likes: 3,
dislikes: 1
}
]);
const [active, setActive] = useState(false);
const toggleActive = index => {
setActive(!active);
};
return (
<div className="containe">
{movies.map((movieDetails, index) => {
// console.log(index)
return (
<div className="card">
<div className="card-body">
<button className="btn-fermer" onClick={() => removeItem(index)}>
Close
</button>
<h6 className="card-id" key={movieDetails.id + index}>
ID:{movieDetails.id}
</h6>
<p className="card-title">
<strong>{movieDetails.title}</strong>
</p>
<p className="card-category">Catégorie: {movieDetails.category}</p>
<p className="card-like active">
{" "}
Like count :{movieDetails.likes}
</p>
<p className="card-dislike active">
{" "}
Like count :{movieDetails.dislikes}
</p>
</div>
<button className="card-button" onClick={() => toggleActive(index)}>
Toggle Likes and Dislikes
</button>
</div>
);
})}
</div>
);
Try this out:
Just place the curly brace in the className prop and pass it a ternay expression to toggle between the two classes you want to based on active state just like that:
const [active, setActive] = useState(false);
const toggleActive = () => setActive(prevState => !prevState);
return (
<div className="containe">
{movies.map((movieDetails, index) => {
// console.log(index)
return (
<div className="card">
<div className="card-body">
<button className="btn-fermer" onClick={() => removeItem(index)}>
Close
</button>
<h6 className="card-id" key={movieDetails.id + index}>
ID:{movieDetails.id}
</h6>
<p className="card-title">
<strong>{movieDetails.title}</strong>
</p>
<p className="card-category">Catégorie: {movieDetails.category}</p>
<p className={active ? "card-dislike active":"card-like active"}>
Like count :{movieDetails.likes}
</p>
<p className={active ? "card-like active":"card-dislike active"}>
Like count :{movieDetails.dislikes}
</p>
</div>
<button className="card-button" onClick={toggleActive}>
Toggle Likes and Dislikes
</button>
</div>
);
})}
</div>
);